<template>
  <div class="coupons-container componentsContainer">
    <van-tabs v-model="active">
      <van-tab title="堂食优惠劵">
        <template v-for="(coupon, index) in coupons">
          <Coupon
            :discount="coupon.discount"
            :threshold="coupon.threshold"
            :title="coupon.title"
            :description="coupon.description"
            :showcheckbox="coupon.showcheckbox"
            :key="index"
          >
          </Coupon>
        </template>
      </van-tab>
      <van-tab title="外卖优惠券"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Coupon from '@/components/coupon.vue'
const coupons = [
  {
    discount: 10,
    threshold: '满30减10',
    title: '周末优惠劵',
    description: '周末福利'
  },
  {
    discount: 20,
    threshold: '满50减20',
    title: '新年优惠劵',
    description: '新年送大礼',
    showcheckbox: true
  }
]

export default {
  name: 'rpshop',
  data() {
    return {
      coupons: coupons
    }
  },
  components: {
    Coupon
  }
}
</script>

<style lang="less" scoped>
.coupons-container {
  height: 100%;
}
</style>